<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList&&bannerImgList.length>0"
      class="banner-bg"
      :src="returnImg(bannerImgList[0].indexImg)"
      :alt="bannerImgList[0].indexName"
    >
    <div class="banner-title" v-if="bannerImgList&&bannerImgList.length>0">
      <h3>{{bannerImgList[0].indexName}}</h3>
      <p>{{bannerImgList[0].indexContent}}</p>
    </div>
    <div class="tab-box">
      <div class="tab-operation">
        <div class="tab-title">加入我们</div>
        <div class="tab-item" v-if="tabList&&tabList.length>0">
          <span
            v-for="(item,index) in tabList"
            :key="index"
            :class="activeIndex===index?'active':''"
            @click="scrollToPosition(index)"
          >{{item.indexName}}</span>
        </div>
      </div>
    </div>
    <div v-if="activeIndex === 0">
      <div class="why-select-me about-model-us roll" v-if="collapse">
        <h3 class="title">{{collapse.indexName}}</h3>
        <span class="index-model-line"></span>
        <div class="select-me-box">
          <el-collapse accordion class="invite">
            <el-collapse-item
              v-for="(item,index) in collapse.children"
              :name="Number(index)+1"
              :key="index"
            >
              <template #title>
                <h3 class="invite-title">{{item.indexName}}</h3>
                <p class="invite-brief">{{item.indexTitle}}</p>
              </template>
              <div style="border-top:1px solid #D8D8D8;" class="join-info">
                <p v-html="item.indexContent"></p>
              </div>
              <a class="resume" href="mailto:zhiyuan@loreage.com">投递简历</a>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="energize roll u238" v-if="selectMeList">
        <h3 class="title">{{selectMeList.indexName}}</h3>
        <span class="index-model-line"></span>
        <ul class="select-me-box" v-if="selectMeList.children && selectMeList.children.length>0">
          <li class="select-me-item" v-for="(item,index) in selectMeList.children" :key="index">
            <img :src="returnImg(item.indexImg)" :alt="item.indexContent">
            <h3>{{item.indexContent}}</h3>
          </li>
        </ul>
      </div>
      <div class="why-select-metwo index-model-comprehensive" v-if="entryList">
        <h3 class="title">{{entryList.indexName}}</h3>
        <span class="index-model-line"></span>
        <ul class="select-me-box" v-if="entryList.children&&entryList.children.length>0">
          <li class="select-me-item" v-for="(item,index) in entryList.children" :key="index">
            <h3>{{"0" + (Number(item.indexSort))}}</h3>
            <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
            <p>{{item.indexName}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <div class="map-box index-model-comprehensive">
        <h3 class="title">{{mapAddress.indexName}}</h3>
        <span class="index-model-line"></span>
        <div class="map-wrap">
          <BaiduMap/>
          <div class="address-box">
            <h3>{{mapAddress.children[0].indexName}}</h3>
            <p>总部地址: {{mapAddress.children[0].indexContent}}</p>
            <p>联系电话: {{mapAddress.children[0].indexTitle}}</p>
            <p>企业邮箱: {{mapAddress.children[0].indexLevel}}</p>
          </div>
        </div>
      </div>
    </div>

    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import BaiduMap from "@/components/BaiduMap.vue";
import { getContactBanner } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop, BaiduMap },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  watch: {
    $route(to) {
      let toActiveIndex = Number(to.query.activeIndex);
      this.activeIndex = toActiveIndex ? toActiveIndex : 0;
    }
  },
  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      selectMeList: [],
      entryList: [],
      activeImg: "u321.png",
      activeIndex: 0,
      bannerImgList: [],
      tabList: [],
      collapse: null,
      mapAddress: null,
      bannerImgListCopy: [],
      bannerImgListCopyAddress: []
    };
  },
  mounted() {
    this.getContactBanner();
  },
  methods: {
    scrollToPosition(index) {
      this.activeIndex = index;
      if (index === 1) {
        this.bannerImgList = this.bannerImgListCopyAddress;
      } else {
        this.bannerImgList = this.bannerImgListCopy;
      }
      //   document.getElementsByClassName("roll")[index].scrollIntoView();
    },
    returnImg(url) {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    },
    handleChangeImg(item) {
      this.activeImg = item.img;
    },
    getContactBanner() {
      getContactBanner().then(res => {
        let data = res.data;
        data.map(item => {
          this.tabList.push(item);

          if (item.id === "502") {
            item.children.map(child => {
              if (child.id === "502004") {
                this.bannerImgList = child.children;
                this.bannerImgListCopy = child.children;
              }
              if (child.id === "502001") {
                this.collapse = child;
              }
              if (child.id === "502002") {
                this.selectMeList = child;
              }
              if (child.id === "502003") {
                this.entryList = child;
              }
            });
          }
          if (item.id === "503") {
            item.children.map(child => {
              if (child.id === "503004") {
                this.bannerImgListCopyAddress = child.children;
              }
              if (child.id === "503001") {
                this.mapAddress = child;
              }
            });
          }
          let toActiveIndex = Number(this.$route.query.activeIndex);
          this.activeIndex = toActiveIndex ? toActiveIndex : 0;
        });
      });
    }
  }
};
</script>
<style scoped lang="scss">
.banner-bg {
  width: 100%;
  height: 4.8rem;
}

.why-select-me {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.028rem;
  .select-me-box {
    width: 13.714rem;
    height: auto;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .invite {
      width: 100%;
      text-align: left;
      ::v-deep .el-collapse-item__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        position: relative;
        .el-icon {
          position: absolute;
          right: 0;
          top: 50%;
        }
      }
      .invite-title {
        font-size: 0.205rem;
        color: #323233;
        text-align: right;
        line-height: 0.205rem;
        margin: 0.182rem 0;
      }
      .invite-brief {
        font-size: 0.16rem;
        color: #626262;
        line-height: 0.16rem;
        margin-bottom: 0.182rem;
      }
      .join-info{
        ::v-deep p{
          font-size: 0.182rem;
        }
      }
    }
  }
}

.energize {
  width: 100%;
  height: 5.554rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .select-me-box {
    width: 13.714rem;
    height: 1.828rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .select-me-item {
      width: 4.457rem;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:hover {
        box-shadow: 0 0 0.114rem rgba(0, 17, 67, 0.3);
      }
      h3 {
        font-size: 0.205rem;
        color: #323233;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.342rem;
        margin-top: 0.205rem;
      }
      img {
        width: 0.365rem;
      }
    }
  }
}
.why-select-metwo {
  width: 100%;
  height: 7.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: 3.474rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .select-me-item {
      width: 3.085rem;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 0.114rem rgba(0, 17, 67, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.457rem;
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 0 0.114rem rgba(0, 17, 67, 0.3);
      }
      img {
        width: 2.685rem;
        height: 1.462rem;
      }
      h3 {
        font-size: 0.32rem;
        color: #323233;
        text-align: center;
        line-height: 0.32rem;
        margin-bottom: 0.411rem;
        width: 100%;
        text-align: left;
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: 0.205rem;
        color: #323233;
        text-align: center;
        line-height: 0.365rem;
        margin-top: 0.182rem;
      }
    }
  }
}
.map-box {
  width: 100%;
  height: 9.485rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .map-wrap {
    width: 13.714rem;
    height: 5.85rem;
    margin-top: 0.64rem;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    .address-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 3.885rem;
      height: 100%;
      opacity: 0.8;
      background: #1F497D;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.05);
      padding: 0.32rem;
      box-sizing: border-box;
      text-align: left;
      h3 {
        font-size: 0.205rem;
        color: #ffffff;
        line-height: 0.205rem;
        margin-bottom: 0.274rem;
      }
      p {
        font-size: 0.14rem;
        color: #ffffff;
        line-height: 0.32rem;
      }
    }
  }
}
.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}

.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
.tab-box {
  width: 100%;
  height: 0.685rem;
  background: #f1f4f8;
  .tab-operation {
    width: 13.714rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .tab-title {
      padding-right: 0.182rem;
      font-family: MicrosoftYaHei-Bold;
      font-size: 0.16rem;
      color: #323233;
      letter-spacing: 0;
      position: relative;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 8px;
        background: #cad6ec;
        right: 0;
        top: 6px;
      }
    }
    .tab-item {
      margin-left: 0.182rem;
      display: flex;
      span {
        margin-right: 0.457rem;
        font-family: MicrosoftYaHei;
        font-size: 0.16rem;
        color: #323233;
        letter-spacing: 0;
        cursor: pointer;
        &.active {
          color: #1790ff;
        }
      }
    }
  }
}
.culture-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h3 {
    font-family: MicrosoftYaHei-Bold;
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 2px 4px rgba(0, 17, 67, 0.4);
  }
  p {
    font-family: MicrosoftYaHei;
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 1px 1px rgba(0, 17, 67, 0.4);
    display: none;
  }
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    h3 {
      margin-bottom: 0.228rem;
    }
    p {
      display: block;
    }
  }
}
.banner-title {
  position: absolute;
  top: 2.377rem;
  left: 50%;
  transform: translateX(-50%);
  width: 9.942rem;
  text-align: center;
  h3 {
    font-size: 1.097rem;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 0.365rem;
  }
  p {
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.457rem;
  }
}
@media only screen and (max-device-width: 768px) {
  .banner-bg {
    height: auto;
  }
  .banner-title {
    width: 100%;
    top: 2.228rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    h3 {
      font-size: 0.342rem;
      margin-bottom: 0.171rem;
    }
  }
  .tab-box {
    width: 100%;
    height: 1rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    overflow-x: auto;
    .tab-operation {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      .tab-item {
        span {
          display: inline-block;
        }
      }
    }
  }
  .why-select-me {
    width: 100%;
    height: auto;
    .select-me-box {
      width: 100%;
      height: auto;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .invite {
        width: 100%;
        text-align: left;
        ::v-deep .el-collapse-item__header {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          height: auto;
          position: relative;
          .el-icon {
            position: absolute;
            right: 0;
            top: 50%;
          }
        }
        .invite-title {
          font-size: 0.205rem;
          color: #323233;
          text-align: right;
          line-height: 0.205rem;
          margin: 0.182rem 0;
        }
        .invite-brief {
          padding-right: 0.228rem;
        }
      }
    }
  }
  .energize {
    width: 100%;
    height: auto;
    .select-me-box {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 100%;
        height: 1.828rem;
        margin-bottom: 0.228rem;
        h3 {
          font-size: 0.205rem;
          color: #323233;
          letter-spacing: 0;
          text-align: center;
          line-height: 0.342rem;
          margin-top: 0.205rem;
        }
        img {
          width: 0.365rem;
        }
      }
    }
  }
  .why-select-metwo {
    width: 100%;
    height: auto;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      flex-wrap: wrap;
      .select-me-item {
        width: 48%;
        height: 3.474rem;
        margin-bottom: 0.228rem;
      }
    }
  }
  .map-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .map-wrap {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      position: static;
      display: flex;
      flex-direction: column;
      .address-box {
        position: sticky;
        width: 100%;
      }
    }
  }
  .title {
    width: 100%;
    font-size: 0.457rem;
  }
}
</style>